<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			html,body{
				background-color: cadetblue;
				height: 100%;
				/*-webkit-font-smoothing:antialiased ;抗锯齿*/
			}
			.wrap{
				width: 80%;
				height: 80%;
				border: 4px solid seagreen;
				outline: 4px solid rosybrown;
				outline-offset: 10px;
				text-align: center;
				position: relative;
				margin: 80px auto;
				perspective: 1000px;
			}
			.photo{
				width: 200px;
				height: 360px;
				border: 3px solid salmon;
				position: absolute;
				top: 50%;
				margin-top: -180px;
				left: 50%;
				margin-left: -100px;
				transition: all 1s;
				transform-style: preserve-3d;
				/*overflow: hidden;这个好像和transform-style冲突*/
			}
			.photo .sec{
				width: 100%;
				height: 100%;
				position: absolute;
				backface-visibility: hidden;
				overflow: hidden;
			}
			.photo img{
				width: 100%;
			}
			.photo .sec_titl{
				position: absolute;
				bottom: 10%;
				color: white;
				text-align: center;
				width: 100%;
			}
			.photo .front{
				z-index: 10;
			}
			.photo .back{
				z-index: 5;
				background-color: rgba(0,0,0,.6);
				color: white;
				text-align: center;
				transform: rotateY(180deg);
			}
			.photo .back p{
				margin-top: 40%;
			}
			.photo:hover{
				/*transform: rotateY(180deg);*/
			}
			/*margin-top也是按照宽度算的百分比？*/
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="photo">
				<div class="sec front">
					<img src="img/01.jpeg" alt="" class="img" />
					<p class="sec_titl">澜月飞鸿</p>
				</div>
				<div class="sec back">
					<p class="desc">随便写点什么</p>
				</div>
			</div>
		</div>
		<button id="btn">change</button>
		
		<script>
			var img = _(".img"),
				btn = _("#btn");
			function _(selector){
				return document.querySelector(selector);
			};
			function _s(selectors){
				return document.querySelectorAll(selectors);			
			};
			
			var photos = _s(".photo");
			for(var i = 0; i < photos.length; i++){
				photos[i].addEventListener('click', function(){
					console.log(this.style.transform)
					this.style.transform === "" ? this.style.transform = 'rotateY(180deg)' : this.style.transform = "";
				}, false)
			}
			
			
			function g(selector){
				var method = selector.substr(0, 1) == '.' ? document.getElementsByClassName : document.getElementById;
				return method(selector.substr(1));
			}
			
			function rom(){
				var url = 'img/0' + (parseInt(Math.random() * 6) + 1) + '.jpeg';
				return url;
			}
			
			btn.addEventListener('click', function(){
				img.src = rom();
			}, false)
			
		</script>
	</body>
</html>
